<template>
  <el-container>
    <el-header style="background-color: white;color:black">
      <h1 align="center">供应商基本信息</h1>

    </el-header>
      <br />
      <br />
    <!-- 查询条件-->
    <el-form :inline="true" :model="queryForm" class="demo-form-inline">
      <el-form-item label="姓名">
        <el-input v-model="queryForm.suppliersName" placeholder="姓名"></el-input>
      </el-form-item>
      <el-form-item label="证书编号">
        <el-input v-model="queryForm.suppliersPid" placeholder="证书编号"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="loadData()">查询</el-button>
      </el-form-item>
    </el-form>



    <el-main>
        <el-table :data="list" style="120%"  :row-class-name="rowClassName">
          <!--列组件  prop对应当前页集合的对象属性 -->

          <el-table-column prop="id" label="编号" width="50"></el-table-column>
          <el-table-column prop="suppliersId" label="编号" v-if="false" width="50"></el-table-column>
          <el-table-column prop="suppliersName" label="姓名" width="70"></el-table-column>
          <el-table-column prop="suppliersSex"  label="性别" width="50">
            <template slot-scope="scope">
                            <span v-if="scope.row.suppliersSex === 1">男</span>
                            <span  v-else-if="scope.row.suppliersSex === 0">女</span>
                        </template>
          </el-table-column>
          <el-table-column prop="suppliersTel" label="电话" width="120"></el-table-column>
          <el-table-column prop="suppliersEmail" label="邮箱" width="120"></el-table-column>
          <el-table-column prop="suppliersPidName" label="证件名称" width="120"></el-table-column>
          <el-table-column prop="suppliersPid" label="证件号码" width="120"></el-table-column>
          <el-table-column prop="suppliersStartTime" label="开始时间" width="120"></el-table-column>
          <el-table-column prop="suppliersEndTime" label="结束时间" width="120"></el-table-column>
        </el-table>
              <!-- 引入elementui的分页组件，前端实现的分页 -->

                 <el-pagination

                   background
                   layout="prev, pager, next"
                   :total="total"
                   @size-change="select"
                   @current-change="selectPage"
                   :current-page="queryForm.page"
                   :page-size="queryForm.row">
                 </el-pagination>


    </el-main>
  </el-container>
</template>

<script>

  import FileSaver from "file-saver";
  import XLSX from "xlsx";


  export default{
      name:"suppliers",
      data(){
        return{
          list:[],//当前页集合
          totalPage:0,//总页数
          total:0,//总条数
          isShow:false,
          queryForm:{
            page:1,
            row:4,
            suppliersName:"",
            suppliersPid:""
          },
          updateForm:{
           suppliersId:"",
           suppliersName:"",
           suppliersSex:"",
           suppliersTel:"",
           suppliersEmail:"",
           suppliersPidName:"",
           suppliersPid:"",
           suppliersStartTime:"",
           suppliersEndTime:""
          },

        }

      },
      methods:{
        loadData(){//加载数据
          var self=this;
          var http=this.$http.get("/user/querySuppliers",{params:this.queryForm});
          http.then(function(rs){
              if(rs.data.data){
                console.log(rs.data.data)
               self.list=rs.data.data.list;
               self.total=rs.data.data.total;
               self.totalPage=rs.data.data.totalPage;
              }else{
                self.$message(rs.data.info)
                self.list=[];
                self.total=0;
              }
          })
          },
          rowClassName({row, rowIndex}) {
              //把每一行的索引加一放进row.id
              row.id = rowIndex+1;
          },
      select(row){
         this.queryForm.row=row;
         this.loadData();
       },
       selectPage(page){
         this.queryForm.page=page;
         this.loadData();
       },
    },
    mounted() {
        this.loadData();

      }
   }

  </script>

<style>
</style>
